<script setup name="Person" lang="ts">
/**
 * 1. 若需要一个基本类型的响应式数据，必须使用`ref`。
 * 2. 若需要一个响应式对象，层级不深，`ref`、`reactive`都可以。
 * 3. 若需要一个响应式对象，且层级较深，推荐使用`reactive`。
 */
import {ref, reactive} from "vue";

// 数据
let car = reactive({brand: '奔驰', price: 100})
let sum = ref(0)
console.log(car)
console.log(Proxy)

function changePrice() {
  car.price += 10
  console.log(car.price)
}

function changeBrand() {
  car.brand = '宝马'
}

function changeCar() {
  // car = {brand: '奥迪', price: 200} // 这么写页面不更新
  // car = reactive({brand: '奥迪', price: 200}) // 这么写页面也不更新 -- 变成一个新的Proxy对象了

  // 下面这个写法可以更新
  Object.assign(car, {brand: '奥迪', price: 200})

  // 如果car 是一个 ref
  // 即 let car = ref({brand: '奔驰', price: 100})
  // car.value = {brand: '奥迪', price: 200}
  console.log(car)
}

function changeSum() {
  sum.value += 1
  // sum = ref(9) 也不行
}


</script>

<template>
  <div class="person">
    <h2>一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
    <button @click="changeBrand">修改品牌</button>
    <button @click="changePrice">加价</button>
    <button @click="changeCar">修改汽车</button>
    <hr>
    <h2>当前求和为 {{ sum }}</h2>
    <button @click="changeSum">求和</button>
  </div>
</template>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px #000;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>